﻿<!-- #layout name=blank-->

<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Diagnosis</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default" v-if="!isScanningView">
    <div class="container-fluid">
      <a class="btn green navbar-btn" :href="diagnosisCodeURL"
        >Add custom item</a
      >
    </div>
  </div>
  <div class="col-md-12">
    <div class="kb-site-diagnose" v-if="!isScanningView">
      <div class="panel panel-blue">
        <div class="panel-heading">
          <button
            @click="startScan"
            class="btn green btn-lg"
            id="scan"
            data-toggle="tooltip"
            data-placement="top"
            title="Please choose the items below"
            >Scan now</button
          >
          <div class="message">
            <h6 class="title">Choose the items to start scanning</h6>
          </div>
        </div>
        <div class="panel-body">
          <kb-tree
            v-if="diagnosticItems"
            :nodes="diagnosticItems"
            @change="handleSelectTreeNode"
          ></kb-tree>
        </div>
      </div>
    </div>
    <div class="kb-site-diagnose" v-if="isScanningView">
      <div class="panel panel-blue">
        <div class="panel-heading">
          <a class="btn green btn-lg" href="javascript:;" @click="endScan"
            >{{cancelBtnText}}</a
          >
          <div class="message">
            <h6 class="title">
              <strong>{{issueNumber}}</strong> <span>issues found</span>
            </h6>
            <p>{{scanPage}}</p>
          </div>
        </div>
        <div class="progress progress-striped active">
          <div
            id="progressBar"
            :style="'width:' + percent + '%'"
            class="progress-bar progress-bar-success"
          ></div>
        </div>
        <div class="panel-body">
          <table class="table" style="margin-top: -16px; margin-bottom: -15px;">
            <tbody v-for="message in messages">
              <tr>
                <td>
                  <span :class="'label label-sm label-' + message.class"
                    >{{ message.typeText }}</span
                  >
                  <span v-html="message.body"></span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/jstree.min.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTree.js"
    ]);
    Kooboo.loadCSS(["/_Admin/Styles/jstree/style.min.css"]);
  })();
</script>
<script src="/_Admin/View/Sites/Diagnosis.js"></script>